<template>
    <div>
        <el-button @click="authApiEnter" type="primary">确 定</el-button>
        <el-tree :data="apiTreeData" :default-checked-keys="apiTreeIds" :props="apiDefaultProps" @check="nodeChange"
            style="height: 80vh; overflow: auto" default-expand-all highlight-current node-key="onlyId" ref="apiTree"
            show-checkbox></el-tree>
    </div>
</template>
<script>
import { getAllApi } from '@/api/api'
import { updateCasbin, getPolicyPathByRoleId } from '@/api/casbin'
export default {
    name: 'Apis',
    props: {
        row: {
            default: function () {
                return {}
            },
            type: Object,
        },
    },
    data() {
        return {
            apiTreeData: [],
            apiTreeIds: [],
            needConfirm: false,
            apiDefaultProps: {
                children: 'children',
                label: 'description',
            },
        }
    },
    methods: {
        nodeChange() {
            this.needConfirm = true
        },
        // 暴露给外层使用的切换拦截统一方法
        enterAndNext() {
            this.authApiEnter()
        },
        // 创建api树方法
        buildApiTree(apis) {
            const apiObj = new Object()
            apis &&
                apis.map((item) => {
                    item.onlyId = 'p:' + item.path + 'm:' + item.method
                    if (Object.prototype.hasOwnProperty.call(apiObj, item.apiGroup)) {
                        apiObj[item.apiGroup].push(item)
                    } else {
                        Object.assign(apiObj, { [item.apiGroup]: [item] })
                    }
                })
            const apiTree = []
            for (const key in apiObj) {
                const treeNode = {
                    ID: key,
                    description: key + '组',
                    children: apiObj[key],
                }
                apiTree.push(treeNode)
            }
            return apiTree
        },
        // 关联关系确定
        async authApiEnter() {
            const checkArr = this.$refs.apiTree.getCheckedNodes(true)
            var casbinInfos = []
            checkArr &&
                checkArr.map((item) => {
                    var casbinInfo = {
                        path: item.path,
                        method: item.method,
                    }
                    casbinInfos.push(casbinInfo)
                })
            const res = await updateCasbin({
                authorityId: this.activeUserId,
                casbinInfos,
            })
            if (res.code == 0) {
                this.$message({ type: 'success', message: 'api设置成功' })
            }
        },
    },
    async created() {
        // 获取api并整理成树结构
        const res2 = await getAllApi()
        const apis = res2.data.apis

        this.apiTreeData = this.buildApiTree(apis)
        const res = await getPolicyPathByRoleId({
            authorityId: this.row.authorityId,
        })
        this.activeUserId = this.row.authorityId
        this.apiTreeIds = []
        res.data.paths &&
            res.data.paths.map((item) => {
                this.apiTreeIds.push('p:' + item.path + 'm:' + item.method)
            })
    },
}
</script>
